import React, { memo, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { AlbumLeftPage } from "./style";
import { albumAction, albumCommentAction } from "../store/actionType";
import {
  getSizeImage,
  getYearMonthDay,
  getCount,
  getfg,
} from "@/utils/format-utils";
import { formalMinuteSeconds } from "@/utils/formatMinuteSecond";
import Comment from "@/components/aboutComment/comment";
import Pagination from "@/components/pagination";
import { NavLink } from "react-router-dom";
import DragZ from "@/components/drag";
import Four from "@/components/button/fourCheck";
import {
  getSongDetailsMessage,
  addSongId,
} from "../../../pages/player/store/actionType";

export default memo(function AlbumLeft(props) {
  // (props)
  const dispatch = useDispatch();
  const [pageNum, setPageNum] = useState(1);
  const [closeTips, setCloseTips] = useState(0);
  const [left, setLeft] = useState(0);
  const [top, setTop] = useState(0);
  const trBoxRef = useRef();

  useEffect(() => {
    dispatch(albumAction(props.id));
  }, [dispatch, props.id]);

  useEffect(() => {
    dispatch(albumCommentAction(props.id, 20, (pageNum - 1) * 20));
  }, [dispatch, pageNum, props.id]);

  const { album, albumComment } = useSelector(
    (state) => ({
      album: state.getIn(["albumPage", "albums"]),
      albumComment: state.getIn(["albumPage", "albumComments"]),
    }),
    shallowEqual
  );

  const collectSongs = (id) => {};
  const zhuanfaSongs = (id) => {};
  const loadSongs = (id) => {};
  const changePage = (page, pageSize) => {
    setPageNum(page);
  };

  const albumName = album.length !== 0 ? album.album.name : "";
  const albumSong = album.length !== 0 ? album.album.artist.name : "";
  const albumSongId = album.length !== 0 ? album.album.artist.id : "";

  const noplay = (e, ids) => {
    if (e.target.className.indexOf("noplay") !== -1) {
      setCloseTips(1);
      const scrolltopTemp =
        document.documentElement.scrollTop || document.body.scrollTop;
      // (document.body.clientWidth/2-240,document.body.clientHeight/2-101,scrolltopTemp)
      const pLeft = document.body.clientWidth / 2 - 240;
      const pTop = document.body.clientHeight / 2 - 101 + scrolltopTemp;
      setLeft(pLeft);
      setTop(pTop);
      // (left,top)
    } else {
      dispatch(getSongDetailsMessage(ids));
      dispatch(addSongId(ids));
    }
  };

  const closeTipsWindow = (num) => {
    setCloseTips(num);
  };

  document.title = `${albumName} - ${albumSong} - 专辑 - 网易云音乐`;

  return (
    <div>
      <DragZ kg={closeTips} pleft={left} ptop={top} close={closeTipsWindow} />
      <AlbumLeftPage>
        <div className="album-top-box">
          <div className="album-l">
            <img
              src={getSizeImage(
                album.length !== 0 ? album.album.picUrl : "",
                177
              )}
              alt=""
            />
            <span className="msk-p coverall"></span>
          </div>
          <div className="album-top-r">
            <div className="album-r-top">
              <i className="album-icon imgIcon"></i>
              <span className="album-r-top-text">
                {album.length !== 0 ? album.album.name : ""}
              </span>
            </div>
            <div className="album-creator-box">
              <span>
                歌手：
                <NavLink
                  to={{
                    pathname: "/artist",
                    search: "?id=" + albumSongId,
                  }}
                  className="creator-nickname"
                >
                  {album.length !== 0 ? album.album.artist.name : ""}
                </NavLink>
              </span>
              <span>
                发行时间：
                {getYearMonthDay(
                  album.length !== 0 ? album.album.publishTime : ""
                )}
              </span>
              {album.length !== 0 ? (
                album.album.company ? (
                  <span>
                    发行公司：{album.length !== 0 ? album.album.company : ""}
                  </span>
                ) : (
                  ""
                )
              ) : (
                ""
              )}
            </div>
            <div className="album-play-box">
              <a title="播放" className="album-playbtn button2">
                <i className="button2">
                  <em className="ply button2"></em>
                  播放
                </i>
              </a>
              <a className="album-play-addlist button2" title="添加到播放列表">
                {" "}
              </a>
              <a className="addalbum u-btn button2">
                <i className="addicon u-btn-i button2">收藏</i>
              </a>
              <a className="u-btn button2">
                <i className="zf u-btn-i button2">
                  ({album.length !== 0 ? album.album.info.shareCount : ""})
                </i>
              </a>
              <a className="u-btn button2">
                <i className="xz u-btn-i button2">下载</i>
              </a>
              <a className=" u-btn button2">
                <i className="pl u-btn-i button2">
                  ({album.length !== 0 ? album.album.info.commentCount : ""})
                </i>
              </a>
            </div>
          </div>
        </div>
        <div className="album-introduce">
          <h3>专辑介绍</h3>
          <div className="album-desc-dot">
            <p>
              {album.length !== 0 ? album.album.description.split("\n")[0] : ""}
            </p>
            <p>
              {album.length !== 0 ? album.album.description.split("\n")[1] : ""}
            </p>
            {album.length !== 0
              ? album.album.description
                  .split("\n")
                  .slice(2)
                  .map((item, index) => {
                    return <p key={index}>{item}</p>;
                  })
              : ""}
          </div>
        </div>
        <div className="songTableTitle">
          <span className="song-list">包含歌曲列表</span>
          <span className="song-number">
            {album.length !== 0 ? album.songs.length : ""}首歌
          </span>
        </div>
        <div className="playList-table">
          <table>
            <thead className="sprite_table">
              <tr>
                <th className="first-kb sprite_table"></th>
                <th className="bt sprite_table">
                  <div className="wp sprite_table">标题</div>
                </th>
                <th className="sc sprite_table">
                  <div className="wp sprite_table">时长</div>
                </th>
                <th className="gs sprite_table">
                  <div className="wp sprite_table">歌手</div>
                </th>
              </tr>
            </thead>
            <tbody>
              {album.length == 0 ? (
                <tr></tr>
              ) : (
                album.songs.map((item, index) => {
                  return (
                    <tr
                      className={
                        item.st !== -1
                          ? item.privilege.downloadMaxbr !== 0
                            ? "tr-box"
                            : "tr-box noplay"
                          : "tr-box noplay"
                      }
                      ref={trBoxRef}
                      key={item.id}
                    >
                      <td className="tr-num">
                        <div className="tr-num-div">
                          <span>{index + 1}</span>
                          <i></i>
                        </div>
                      </td>
                      <td className="tr-name">
                        <div>
                          <i
                            onClick={(e) => noplay(e, item.id)}
                            className={
                              item.st !== -1
                                ? item.privilege.downloadMaxbr !== 0
                                  ? "tr-name-play sprite_table fl"
                                  : "tr-name-play sprite_table tr-name-noplay fl"
                                : "tr-name-play sprite_table tr-name-noplay fl"
                            }
                          ></i>
                          <span className="tr-name-span fl">
                            <NavLink
                              to={{
                                pathname: "/song",
                                search: "?id=" + item.privilege.id,
                              }}
                            >
                              {item.name}
                            </NavLink>
                          </span>
                        </div>
                      </td>
                      <td className="tr-time">
                        {item.st !== -1 ? (
                          item.privilege.downloadMaxbr === 0 ? (
                            <div className="tr-time-noplay">
                              {formalMinuteSeconds(item.dt)}
                            </div>
                          ) : (
                            <>
                              <div className="tr-time-times">
                                {formalMinuteSeconds(item.dt)}
                              </div>
                              <Four
                                id={item.id}
                                collectSongs={(e) => collectSongs(item.id)}
                                zhuanfaSongs={(e) => zhuanfaSongs(item.id)}
                                loadSongs={(e) => loadSongs(item.id)}
                              />
                            </>
                          )
                        ) : (
                          ""
                        )}
                      </td>
                      <td className="tr-songer">
                        <div>
                          <span>
                            {item.ar.map((itema, indexa) => {
                              return (
                                <NavLink
                                  to={{
                                    pathname: "/artist",
                                    search: "?id=" + itema.id,
                                  }}
                                  key={indexa}
                                >
                                  {getfg(itema.name, item, indexa)}
                                </NavLink>
                              );
                            })}
                          </span>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
        <Comment pageNum={pageNum} comments={albumComment} />
        <Pagination
          page={pageNum}
          size={35}
          getPage={changePage}
          total={albumComment.length !== 0 ? albumComment.total : ""}
        />
      </AlbumLeftPage>
    </div>
  );
});
